<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        <style type="text/css">
	html{
		font-size: 20px;
	}
  	body{
  		background:#444;
  	}
	@-webkit-keyframes opac{
		from {
			opacity: 1;
			width:0;
			height:0;
			top:50%;
			left:50%;
		}
		to {
			opacity : 0;
			width:100%;
			height:100%;
			top:0;
			left:0;
		}
	}
	.animate .w2{
		-webkit-animation-delay:1s;
	}
	.animate .w3{
		-webkit-animation-delay:2s;
	}
	.animate .w4{
		-webkit-animation-delay:3s;
	}
	.wave{
		width: 22.7rem;
		height: 22.7rem;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.wave *{
		border:1px solid #fff;
		position:absolute;
		border-radius:50%;
		-webkit-animation:opac 4s infinite;
	}
	</style>
    </style>
  </head>
  <body>
    <body>
      <div class="animate wave">
        <div class="w1"></div>
        <div class="w2"></div>
        <div class="w3"></div>
        <div class="w4"></div>
      </div>
    </body>
  </body>
</html>
